<template>
	<div class="alert" transition="fade" role="alert"
		:class="notice.type?'alert-success':'alert-danger'" 
		:style="{marginLeft: -(this.notice.msg.length*16+30)/2+'px'}" 
		v-if="notice.msg" >
		{{notice.msg}}
	</div>
</template>

<script>
	export default {
		props: ['notice'],
		watch: {
			notice: function() {
				if (this.notice.msg) {
					clearTimeout(this.timeout);
					this.timeout = setTimeout(function() {
						this.notice.msg = "";
					}.bind(this), 5000);
				}
			}
		}
	}
</script>

<style>
	.fade-transition {
		transition: all .8s ease;
		opacity: 1;
	}
	.fade-enter, .fade-leave {
		opacity: 0;
	}
	.alert-danger {
		/*width: 360px;*/
		top: 42px;
		left: 50%;
		position: fixed;
		z-index: 9999;
		background-color: #e74c3c;
		text-align: center;
		color: #fff;
	}
	.alert-success {
		/*width: 360px;*/
		top: 42px;
		margin-left: -100px;
		position: fixed;
		left: 50%;
		z-index: 9999;
		background-color: #27ae60;
		color: #fff;
	}
	.alert {
		border: 0;
	}
</style>